<template>
  <a-modal
    class="audit-material-dialog"
    v-model:visible="dataWrapper.visiable"
    title="Basic Modal"
    @ok="handleOk"
    @cancel="cancel"
  >
    <a-form
      :model="dataWrapper.formData"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item has-feedback label="审核状态" v-bind="validateInfos.status">
        <a-radio-group
          v-model:value="dataWrapper.formData.status"
          button-style="solid"
        >
          <a-radio-button
            v-for="item in dataWrapper.statusList"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item has-feedback label="审核备注" v-bind="validateInfos.memo">
        <a-textarea
          v-model:value="dataWrapper.formData.memo"
          placeholder="请输入审核备注"
          :auto-size="{ minRows: 2 }"
        />
      </a-form-item>
    </a-form>
    <a-collapse class="audit-material-dialog__acollapse">
      <a-collapse-panel header="审核历史">
        <a-timeline
          style="margin-bottom: -50px; margin-top: 5px"
          v-if="dataWrapper.auditLogs && dataWrapper.auditLogs.length > 0"
        >
          <a-timeline-item
            v-for="item in dataWrapper.auditLogs"
            :color="auditHistoryColor(item.result)"
            :key="item.id"
          >
            <template #dot v-if="item.result === MaterialStatus.CHECK_PENDING">
              <ClockCircleOutlined style="font-size: 16px" />
            </template>
            {{
              `${item.auditTime}，${item.auditUser}将状态改为${auditHistoryText(
                item.result
              )}，备注为：${item.memo}`
            }}
          </a-timeline-item>
        </a-timeline>
        <span v-else>暂无</span>
      </a-collapse-panel>
    </a-collapse>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Form } from 'ant-design-vue'

import type {
  AuditMaterialDialogForm,
  AuditMaterialDialogState,
} from '../types'
import type { ValidationRule } from 'ant-design-vue/lib/form/Form'
import { MaterialStatus } from '@/components/ItemList/MaterialList/types'
const { useForm } = Form

const props = defineProps<{
  dataWrapper: AuditMaterialDialogState
}>()

const emits = defineEmits<{
  (e: 'enter'): void
}>()

const auditHistoryColor = (result: MaterialStatus) => {
  const colorMap = {
    [MaterialStatus.CHECK_PENDING]: 'blue',
    [MaterialStatus.NORMAL]: 'green',
    [MaterialStatus.REJECT]: 'red',
    [MaterialStatus.FORBIDDEN]: 'red',
  }
  return colorMap[result]
}
const auditHistoryText = (result: MaterialStatus) => {
  const textMap = {
    [MaterialStatus.CHECK_PENDING]: '待审核',
    [MaterialStatus.NORMAL]: '审核通过',
    [MaterialStatus.REJECT]: '审核不通过',
    [MaterialStatus.FORBIDDEN]: '素材已下架',
  }
  return textMap[result]
}

const rules = ref<Record<keyof AuditMaterialDialogForm, ValidationRule[]>>({
  status: [
    {
      validator: async (_, value: MaterialStatus) => {
        if (
          value === MaterialStatus.NORMAL ||
          value === MaterialStatus.REJECT
        ) {
          return Promise.resolve()
        }
        return Promise.reject('请选择审核状态！')
      },
      trigger: 'change',
    },
  ],
  memo: [],
})

const { validate, validateInfos, resetFields } = useForm(
  props.dataWrapper.formData,
  rules
)

const handleOk = () => {
  validate()
    .then(() => {
      emits('enter')
    })
    .catch((err) => {
      console.error(err.errorFields[0].errors[0])
    })
}

const cancel = () => {
  resetFields()
}
</script>

<style lang="scss" scoped>
@include b(audit-material-dialog) {
  @include e(acollapse) {
    margin-top: 12px;
  }
}
</style>
